<template>
  <div class="facility-dialog">
    <div class="dialog-title">{{ info.deviceName }}</div>
    <div class="remote-restart-btn">
      <div class="btn-i">智能水肥</div>
      <div class="btn-i">生长模型</div>
      <img src="@/assets/img/close.png" @click="$emit('close')" />
    </div>

    <div class="facility-content">
      <div class="top-main">
        <div class="facility-img">
          <img src="@/assets/img/gb/img_water.png" />
        </div>
        <div class="top-main-right">
          <div class="facility-info">
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_state.png" />
              <div>
                <div class="info-i-text">
                  {{ info.state ? "工作中" : "停止工作" }}
                </div>
                <div class="info-i-title">状态</div>
              </div>
            </div>
            <template v-for="(item, index) in info.propertys" :key="index">
              <div
                class="info-i"
                v-if="
                  item.identifier == 'fatFlow' ||
                  item.identifier == 'electricity'
                "
              >
                <img
                  class="info-i-icon"
                  src="@/assets/img/gb/icon_flow.png"
                  v-if="item.identifier == 'fatFlow'"
                />
                <img
                  class="info-i-icon"
                  src="@/assets/img/gb/icon_voltage.png"
                  v-else
                />
                <div>
                  <div class="info-i-text">{{ item.value }}{{ item.unit }}</div>
                  <div class="info-i-title">{{ item.name }}</div>
                </div>
              </div>
            </template>
          </div>
          <div class="alarm-message">
            <div class="alarm-message-title">
              <img class="alarm-icon" src="@/assets/img/gb/icon_xiaox.png" />
              <div class="alarm-title">报警消息</div>
            </div>
            <div class="alarm-message-content">深层土壤湿度数据异常</div>
          </div>
        </div>
      </div>

      <div class="smart-water-fertilizer-bottomMain">
        <div class="data-i">
          <div class="model-tltle">远程智能水肥控制</div>
          <div class="valve-main">
            <div class="valve-i">
              <div class="valve-i-name">喷灌</div>
              <!-- <div class="valve-i-state">状态: 开启</div> -->
              <div class="valve-i-state" @click="setStyle">
                {{ isSprinkle ? "关闭" : "开启" }}
              </div>
              <!-- <div class="valve-i-btn">关闭</div> -->
            </div>
          </div>
        </div>
        <div
          style="
            display: grid;
            grid-template-columns: 47.2% 47.2%;
            column-gap: 40px;
          "
        >
          <div class="data-i">
            <div class="model-tltle">肥流量统计</div>
            <div class="echarts-main">
              <lineMain :datas="lineDatas" />
            </div>
          </div>
          <div class="data-i">
            <div class="model-tltle">用电量统计</div>
            <div class="echarts-main">
              <bar :datas="bardata" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineAsyncComponent } from "vue";
import { deviceDetail, getWaterNums } from "@/api/deviceInfo";
const lineMain = defineAsyncComponent(() => import("../components/line.vue"));
const bar = defineAsyncComponent(() => import("./Bar.vue"));

const info = ref({ deviceName: "" });
const isSprinkle = ref(false);
const lineDatas = reactive({
  name: "肥流量",
  unit: "升（L）",
  xData: [],
  yData: [],
});
const bardata = reactive({
  nums: 1,
  unit: "干瓦时",
  x: [],
  y1: {
    name: "用电量",
    data: [],
  },
  stack: "1",
});

function initData(name: string, num: string) {
  getDetail(name);
}

function getDetail(name: string) {
  deviceDetail({ deviceName: name }).then((res) => {
    info.value = res.data;
    console.log(info.value);

    /*水肥数据统计*/
    getWaterNums({ deviceName: name, property: "fatFlow", size: 5 }).then(
      (response) => {
        lineDatas.xData = response.data.times;
        lineDatas.yData = response.data.values;
      }
    );
    /*用电量统计*/
    getWaterNums({ deviceName: name, property: "electricity" }).then(
      (response) => {
        console.log(response);
        bardata.x = response.data.times;
        bardata.y1.data = response.data.values;
      }
    );
  });
}
function setStyle() {
  if (isSprinkle.value) {
    isSprinkle.value = false;
  } else {
    isSprinkle.value = true;
  }
  window.krpano.call("setStyle();");
}
// 暴露变量
defineExpose({
  initData,
});
</script>

<style scoped lang="scss">
@import "../deviceDialog/dialog";
</style>
